<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>请求</title>

    <style>
        #app {
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }

        .mytable {
            border: 1px solid #A6C1E4;
            font-family: Arial;
            border-collapse: collapse;
        }

        table th {
            border: 1px solid black;
            background-color: #71c1fb;
            width: 100px;
            height: 20px;
            font-size: 15px;
        }

        table td {
            border: 1px solid #A6C1E4;
            text-align: center;
            height: 15px;
            padding-top: 5px;
            font-size: 12px;
        }

        .double {
            background-color: #c7dff6;
        }

        input {
            width: 95%;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <table class="mytable">
        <tr class="double">
            <th>字段:</th>
            <th>Value:</th>
        </tr>
        <tr class="double">
            <td>userId:</td>
            <td><input v-model="userInfo.userId"></td>
        </tr>
        <tr class="double">
            <td>userName:</td>
            <td><input v-model="userInfo.userName"></td>
        </tr>
        <tr class="double">
            <td>age:</td>
            <td><input type="number" v-model="userInfo.age"></td>
        </tr>
        <tr class="double">
            <td>info:</td>
            <td>
                <textarea v-model="userInfo.info" cols="50" rows="5" placeholder="随便输一点"></textarea>
            </td>
        </tr>
        <tr class="double">
            <td>AES密钥:</td>
            <td>
                <textarea v-model="aes.key" cols="50" rows="2" placeholder="AES密钥"></textarea>
            </td>
        </tr>
<!--        <tr class="double">-->
<!--            <td>AES向量:</td>-->
<!--            <td>-->
<!--                <textarea v-model="aes.iv" cols="50" rows="1" placeholder="向量的长度为16位"></textarea>-->
<!--            </td>-->
<!--        </tr>-->
    </table>
    <button @click="testRequest">发送测试请求</button>
    <br>
    <div>
        <p>要发送的数据：<span>{{parameter}}</span></p>
        <p>加密后的数据：{{encodeContent}}</p>
        <br>
        <h3>数据返回：</h3>
        <p>收到服务端的内容：<p>{{result}}</p></p>
        <p>解密服务端AES密钥内容：<p>{{decodeAes}}</p></p>
        <p>最终拿到服务端的内容：<p>{{decodeContent}}</p></p>

    </div>
</div>
<script src="../static/js/vue.min.js" th:src="@{js/vue.min.js}"></script>
<script src="../static/js/rsa/jsencrypt.min.js" th:src="@{js/rsa/jsencrypt.min.js}"></script>
<script src="../static/js/aes/aes.js" th:src="@{js/aes/aes.js}"></script>
<script src ="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    window.onload = function () {
        var vm = new Vue({
            el: '#app',
            data: {
                rsa: {
                    // 自己的rsa公私钥
                    mePublicKey: "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCf0B4Al2wIuGK9Bj9Ao23siR2mMfkvdrxEGu2j0tNeA1LSyKOuw7FLmreRMYLCQMI4BTJNYsxUqvdS8IxFpD5hOx9mx6OqY2GQSIZq5a1lt3Rx4SpDiuuVGm7h5uuLN7bvMfaLBW3g4E5DAKapuZ/u5ULO+y2jczVXkaSb1IjNnwIDAQAB",
                    mePrivateKey:"MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAJ/QHgCXbAi4Yr0GP0CjbeyJHaYx+S92vEQa7aPS014DUtLIo67DsUuat5ExgsJAwjgFMk1izFSq91LwjEWkPmE7H2bHo6pjYZBIhmrlrWW3dHHhKkOK65UabuHm64s3tu8x9osFbeDgTkMApqm5n+7lQs77LaNzNVeRpJvUiM2fAgMBAAECgYAq4FxcTkPm5wleq4Fm5zIDxxnUUA4J5PJH122wiUy6KWwcL0ZzCf/UR/M+Gil50oQJIaPITVyCzsfCUdVgjdtKL7x8e1dQwlI3/DLEat02Njj4fl6KsMq9EqLyleq0UdgYtevZOOoi+ZKXlqZjkM3yOsbwyu9u0D+s77KfHihwuQJBAODhWKTLywJwSXPC6CvlSoyCjscWgUadk8IN+ELyLq591DYFCQllYQPyMj8Cy0dY5OC9GvwRLZurs9LGi6C9d0UCQQC17a76RNHqmmGKsEEGIx3XIzvDrjSRmE3v+NLMcf+JUaUJiKmedDZeWnJuxIXVmFbHi2bzCb2NXUYqhuXsuJ2TAkBHxSO5VKEx4gxPOcFHYSJtva07tN8FXn0tza+SDiD/54C2zNyZdxWDYOTQX1/pIWHKqA/YqtLXf/EgL+WYI1/RAkAk+RwRgsECo8NlEzLz01kyKtfvicznNgPI3FHC+PwM5UncKSkHqeiOvmT5O/lTEnW4cg1HIVijjSxAYlACDvb/AkBmwlv6+gLoKpCU6h7+J6OxB9GKM2Hjs3Mh5tgXgveCwMg2Knz+RPIj92jq7CLm20xs2654yYnyHc4V+kzr3Zu1",
                    // 后端的rsa公钥
                    backPublicKey: "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCJvCDW9GIBsiv9ma9r2btffIxQQHB98Pl1S2RV2PrQsK1O2yFSUf8P43l5EfAh+jiEn/k5egKEoeMRLdDZkt5afNgPYbNjiRFJP8NZTw4f3Yxp91+d04GGkeFcj59QIn/rqqHo2JLOESNae8IC1tKKQTqkwVIjLRwTIDcVmsq9NwIDAQAB"
                },
                aes: {
                    iv: "123456789abcdefh",
                    key:"",
                    encodeKey:""
                },
                userInfo: {
                    userId: "1",
                    userName: "rstyro",
                    age: 20,
                    info: "信息内容......",
                },
                parameter: "",
                encodeContent: "",
                decodeContent: "",
                decodeAes: "",
                result: ""
            },
            http: {
                root: '/',
                headers: {
                    loginToken: "asdb",
                }
            },
            methods: {
                testRequest: function () {
                    // 随机生成32位  aes 密钥
                    this.aes.key=generateKey();
                    // 参数转json 字符串
                    this.parameter = JSON.stringify(this.userInfo);
                    // aes 加密
                    this.encodeContent = aesEncode(this.parameter,this.aes.iv,this.aes.key);
                    // rsa 后端公钥加密aes密钥
                    let encodeAesKey = rsaEncode(this.rsa.backPublicKey,this.aes.key);
                    this.aes.encodeKey=encodeAesKey;
                    console.log("encodeAeskey:",this.aes.encodeKey);
                    axios.post('http://localhost:8800/test1', this.encodeContent,{
                        headers: {
                            "Content-Type": "application/json;charset=utf-8",
                            key:encodeAesKey
                        }
                    }).then(function (response) {
                        console.log("response:",response);
                        // 1、服务端返回的数据
                        vm.result=response.data;
                        // 2、rsa 解密拿到aes密钥
                        vm.decodeAes = rsaDecode(vm.rsa.mePrivateKey,vm.result.key);
                        // 3、aes 解密
                        vm.decodeContent = aesDecode(vm.result.data,vm.aes.iv,vm.decodeAes);
                    }).catch(function (error) {
                        console.log("error:",error);
                    });
                }
            }
        });
    }

    // aes 加密
    function aesEncode(content,iv,aesKey){
        iv = CryptoJS.enc.Utf8.parse(iv);
        aesKey = CryptoJS.enc.Utf8.parse(aesKey);
        let encrypted = CryptoJS.AES.encrypt(content, aesKey, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return  encrypted.toString();
    }

    // aes 解密
    function aesDecode(encrypted,iv,aesKey){
        iv = CryptoJS.enc.Utf8.parse(iv);
        aesKey = CryptoJS.enc.Utf8.parse(aesKey);
        var decrypted = CryptoJS.AES.decrypt(encrypted, aesKey, {
            iv: iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        // 转换为 utf8 字符串
        return CryptoJS.enc.Utf8.stringify(decrypted);
    }

    // rsa 公钥加密
    function rsaEncode(publicKey,content){
        // 加密+base64
        const encrypt = new JSEncrypt();
        // 设置公钥
        encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + publicKey + '-----END PUBLIC KEY-----');
        return encrypt.encryptLong(content);
    }

    // rsa 私钥解密
    function rsaDecode(privateKey,content){
        // 加密+base64
        const encrypt = new JSEncrypt();
        encrypt.setPrivateKey(privateKey);
        return encrypt.decryptLong(content);
    }

    //随机生成aes 密钥
    function generateKey(){
        return CryptoJS.lib.WordArray.random(128/8).toString();
    }

</script>
</body>
</html>